<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				当前地点
			</view>
			<view class="content">
				<text>{{currentLocation}}</text>
				<view @click="chooseLocation">
					<image src="../../static/icon/locate.png" />
					<text>重新定位</text>
				</view>
			</view>
		</view>
		<view class="community">
			<view class="title">
				当前地点
			</view>
			<u-cell-group>
				<u-cell v-for="item in communityList" :key="item.id" :title="item.title" isLink
					@click="goBuilding(item.title)">
				</u-cell>
			</u-cell-group>
		</view>
		<map id="map" :markers="markers" :longitude="location.longitude" :latitude="location.latitude"></map>
	</view>
</template>

<script>
	import qqmapwx from '../../utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0,
					width: 35,
					height: 35
				}],
				currentLocation: '定位中...',
				communityList: []
			};
		},
		onLoad() {
			// 初始化定位
			this.initLocation()
		},
		methods: {
			initLocation() {
				uni.getLocation({
					type: "gcj02",
					isHighAccuracy: true,
					success: (res) => {
						this.updataLocation(res)
						// 解析坐标文本
						this.initLocationText()
						this.searchCommunity()
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						this.currentLocation = res.result.address
					}
				})
			},
			// 手动获取定位
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: res => {
						if (!res.name) return
						this.currentLocation = res.name
						this.updataLocation(res)
						this.searchCommunity()
					}
				})
			},
			// 更新地图经纬度
			updataLocation(res) {
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			// 获取周围社区
			searchCommunity() {
				qqmapwx.search({
					location: this.location,
					keyword: '住宅小区',
					success: (res, data) => {
						console.log(res);
						this.communityList = res.data
						res.data.forEach(item => {
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 35,
								height: 35,
								title: item.title,
								iconPath: '/static/icon/house.png'
							})
						})
					}
				})
			},
			// 跳转选择楼栋
			goBuilding(title) {
				uni.navigateTo({
					url: '/pkg-house/choiceBuilding/choiceBuilding'
				})
				this.$store.commit('house/setBuilding', title)
			}
		},

	}
</script>

<style lang="scss">
	.choose-community {
		height: 100%;
		background-color: #FAFAFA;

		.current-location {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				view {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}

					text {
						color: #5591AF;
					}
				}
			}
		}

		#map {
			width: 750rpx;
			height: 750rpx;
		}
	}
</style>
